import DeviceTotal from "./components/center/deviceTotal";
import AlarmTrend from "./components/center/alarmTrend";
import LeftAnalysis from "./components/left/leftAnalysis";
import LeftBasic from "./components/left/leftBasic";
import LeftRanking from "./components/left/leftRanking";
import "./dashboard.scss";

import Right from "./components/right/index";
import "./index.scss";
import { useI18n } from "vue-i18n";
import { dayjs } from "element-plus";
import DialogBox from "@/components/DialogBox";
import { filePrefix } from "@/hooks/useSystem";
import VideoPanel from "@/components/VideoPanel";
import { useRoute, useRouter } from "vue-router";
import { getWeekLabel } from "@/utils/format";
import { useFullscreen } from "@vueuse/core";
import mittBus from "@/utils/mittBus";
export default defineComponent({
	props: {},
	emits: [],
	setup() {
		const route = useRoute();
		const deviceTotalEl = ref();
		const alarmTrendEl = ref();
		const state = reactive({
			dictMap: {} as { [key: string]: string },
			refresh: {} as NodeJS.Timeout | any,
			showDashboard: false,
			dashboard: {
				totalInfo: {
					today: 0,
					yesterday: 0,
					month: 0
				},
				ranking: [],
				trend: [],
				inoutTotal: {},
				inOutTrend: []
			},
			topoType: route.query.topoType as string
		});
		const videoDialog = reactive({
			visible: false,
			title: "实时视频",
			aiList: [],
			videoUrl: ""
		});
		onMounted(() => {
			//宏电大厦大屏
			state.showDashboard = true;
			state.topoType = "hdds";
			loadDashboard();
		});
		const el = ref();
		const pageFullscreen = useFullscreen(el);
		const loadDashboard = () => {
			nextTick(() => {
				deviceTotalEl.value?.loadData();
				pageFullscreen.toggle();
			});
		};
		const router = useRouter();
		return () => {
			return (
				<div ref={el} class={["relative dashboard h-full hdds"]}>
					{/* 大屏方案（不经过宏电大厦） */}
					<>
						<HddsHeader
							titleName="数据监控中心"
							topoType={state.topoType}
							isFullscreen={pageFullscreen.isFullscreen.value}
							onExit={async () => {
								await router.push("/iot/device");
								mittBus.emit("tabMenuClick");
							}}
							onToggelFullscreen={pageFullscreen.toggle}
						/>
						<div class="hdds-bg"></div>
					</>
					{/* 大屏图表 */}
					{state.showDashboard ? (
						<>
							<div class="left animate__animated animate__fadeInLeftBig">
								<LeftBasic dashboardData={state.dashboard}></LeftBasic>
								<LeftRanking dashboardData={state.dashboard}></LeftRanking>
								<LeftAnalysis dashboardData={state.dashboard}></LeftAnalysis>
							</div>
							<div class="center-top">
								<DeviceTotal ref={deviceTotalEl} />
							</div>
							<div class="center-bottom">
								<AlarmTrend
									ref={alarmTrendEl}
									dashboardData={state.dashboard}
									class="animate__animated animate__fadeInRightBig"
								/>
							</div>
							<div class="right animate__animated animate__fadeInRightBig">
								<Right />
							</div>
						</>
					) : null}
					<DialogBox
						class="dialog-dense"
						footerLabel={["关闭"]}
						width="70vw"
						v-model:visible={videoDialog.visible}
						title={videoDialog.title}
						onClose={() => (videoDialog.visible = false)}
					>
						<div class="w-full flex" style="height:75vh">
							<VideoPanel height="100%" style="flex:1;background:#000;box-sizing: border-box;" videoUrl={videoDialog.videoUrl} />
							<div class="image-list w-80 pl-2 pr-2">
								<el-scrollbar style="height: 100%">
									{videoDialog.aiList?.map((item: any, index: number) => {
										return (
											<div class="image-item pb-1 relative grid" style="min-height:190px">
												{item.value.image?.map((aiImg: string) => {
													return (
														<div class="h-full">
															<el-image
																class="h-full w-full"
																fit="fill"
																hide-on-click-modal
																lazy
																initial-index={index}
																preview-src-list={videoDialog.aiList.map(
																	(item: any) => `${filePrefix()}${item.value.image?.[0]}`
																)}
																src={`${filePrefix()}${aiImg}`}
															/>
														</div>
													);
												})}
												<div class="absolute right-2 top-2 text-xs text-white" style="background: #00000090;padding: 10px;">
													<div>时间：{dayjs(item.value.timestamp || item.updateTime).format("MM-DD HH:mm")}</div>
													{item.value.event &&
														Object.entries(item.value.event).map((info: any[]) => {
															return (
																<div>
																	<span>类型： </span>
																	<span>{state.dictMap[info[0]] || info[0]}, </span>
																	<span class="text-red-600">
																		{info[1].map((ext: any, index: number) => {
																			return `${index > 0 ? "," : ""}${ext.probs || 0}`;
																		})}
																	</span>
																</div>
															);
														})}
												</div>
											</div>
										);
									})}
									{!videoDialog.aiList?.length ? <div class="text-center pt-20 text-gray-400">暂无AI事件</div> : null}
								</el-scrollbar>
							</div>
						</div>
					</DialogBox>
				</div>
			);
		};
	}
});

const HddsHeader = defineComponent({
	props: {
		topoType: String,
		titleName: String,
		isFullscreen: Boolean
	},
	emits: ["exit", "toggelFullscreen", "changeTopo"],
	setup(props, { emit }) {
		const { t } = useI18n();
		const state = reactive({
			week: "",
			realtime: "",
			refresh: null as null | NodeJS.Timeout
		});
		onMounted(() => {
			refreshData();
		});
		const refreshData = () => {
			state.realtime = dayjs().format("YYYY年MM月DD日 HH时mm分ss秒");
			getWeek();
			state.refresh = setTimeout(() => {
				refreshData();
			}, 1000);
		};
		const getWeek = () => {
			let week = dayjs().day();
			state.week = getWeekLabel(week);
		};

		onBeforeUnmount(() => {
			clearRefresh();
		});

		const clearRefresh = () => {
			if (state.refresh) {
				clearTimeout(state.refresh);
				state.refresh = null;
			}
		};
		return () => {
			return (
				<div class="hdds-header">
					<div class="flex justify-between w-full">
						<div class="info flex">
							<span>{state.realtime}</span>
							<span class="pl-2">
								<div>{state.week}</div>
							</span>
						</div>
						<div class="title-text">{props.titleName}</div>
						<div class="info right" style="opacity:0.8;padding-top:0;height: 40px;">
							<el-tooltip
								effect="light"
								show-after={500}
								content={props.isFullscreen ? t("index.btnContent.fullScreen") : t("index.btnContent.exitFullScreen")}
							>
								<el-link
									onClick={() => emit("toggelFullscreen")}
									underline={false}
									style="color:#eee;font-size: 25px;padding: 5px 10px;margin-left:0;"
									class={["cursor-pointer iconfont", props.isFullscreen ? "iconbx-exit-fullscreen" : "iconbx-fullscreen"]}
								></el-link>
							</el-tooltip>
							<el-link
								onClick={() => emit("exit")}
								underline={false}
								style="color:#eee;font-size: 25px;padding: 5px 10px; margin-left:0;"
								class={["iconfont iconbx-exit"]}
							></el-link>
						</div>
					</div>
				</div>
			);
		};
	}
});
